import { ReactElement, useEffect, useRef } from 'react'
import { Modal, Button, Form, FormInstance } from 'antd'
import { SystemQuestionSchema } from '@src/components/schema/systemQuestion'
import Text from '@components/text'
import FileList from '@src/components/fileList'

const { Item } = Form

interface Props {
  data: SystemQuestionSchema | null
  visible: boolean
  refreshFn: () => void
  hide: () => void
}

function Main ({ data, visible, hide }: Props): ReactElement {
  const formRef = useRef<FormInstance>(null)
  useEffect(() => {
    const c = formRef.current
    if (c !== null) {
      if (data !== null) {
        c.setFieldsValue(data)
      } else {
        c.resetFields()
      }
    }
  }, [data])
  return (
    <Modal title='问题详情' visible={visible} onCancel={hide} footer={<Button onClick={hide}>返回</Button>}>
      <Form ref={formRef} labelCol={{ flex: '98px' }}>
        <Item name='id' noStyle><span /></Item>
        <Item label='标题' name='title'>
          <Text />
        </Item>
        <Item label='问题类型' name='type'>
          <Text />
        </Item>
        <Item label='问题描述' name='content'>
          <Text />
        </Item>
        <Item label='状态' name='status'>
          <Text />
        </Item>
        <Item label='常见问题' name='isqa'>
          <Text format={(v) => v as number === 1 ? '是' : '否'} />
        </Item>
        {
          data !== null && data.status === '处理中' && (
            <Item label='处理情况' name='remark'>
              <Text />
            </Item>
          )
        }
        <Item name='file' label='截图上传'>
          <FileList />
        </Item>
        {
          data !== null && ['完成', '暂不处理'].includes(data.status) && (
            <>
              <Item label='解决耗时' name='utime'>
                <Text format={(v) => `${v as number}分钟`} />
              </Item>
              <Item label='处理情况' name='remark'>
                <Text />
              </Item>
              <Item name='response_file' label='处理截图'>
                <FileList />
              </Item>
            </>
          )
        }
      </Form>
    </Modal>
  )
}

export default Main
